<!--横着的柱状图-->
<template>
    <div :id="id" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
   import echarts from 'echarts'
   require('echarts/theme/macarons') // echarts theme
   import resize from '../mixins/resize'
    export default {
        mixins: [resize],
        props: {
            id: {
                type: String,
                default: 'chart'
            },
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '350px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions({ name1, name2, seriesData1, seriesData2 } = {}) {
                this.chart.setOption({
                    grid: {
                        left: 10,
                        right: 10,
                        bottom: 20,
                        top: 30,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10]
                    },
                    legend: {
                        // data: ['新车', '次新车'],
                        show:false,
                    },
                    xAxis: {
                        boundaryGap: false,
                        splitLine:{show: false},
                        splitArea : {show : false},
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            show:false
                        },
                        axisLabel:{
                            show:false
                        }
                    },
                    yAxis: {
                        splitLine:{show: false},//去除网格线
                        splitArea : {show : false},//保留网格区域
                        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        data:['新车','次新车'],
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            show:false
                        },
                        axisLabel:{
                            textStyle: {
                                color: '#4D4D4D',
                                fontSize : 12
                            }
                        }
                    },
                    color:['#978FF3','#E6E4FF'],
                    // series:seriesData
                    series: [
                          {
                                name: name1,
                                barGap: .2,  //两个柱子之间的距离
                                barWidth : 16,  //柱子的宽度
                                // data: [100, 120, 161, 134, 105, 160, 165],
                                data: seriesData1,
                                smooth: true,
                                type: 'bar',
                                animationDuration: 2800,
                                animationEasing: 'cubicInOut'
                            },
                            {
                                name: name2,
                                type: 'bar',
                                barWidth : 16,
                                // data: [10, 82, 91, 154, 162, 140, 145],
                                data: seriesData2,
                                smooth: true,
                                animationDuration: 2800,
                                animationEasing: 'quadraticOut'
                            }
                    ]
                })

            }
        }
    }
</script>
